<template>
  <div class="data-validation-report">
    <div class="report-header">
      <h3>数据验证报告</h3>
      <div class="header-actions">
        <el-button type="primary" size="small" @click="refreshReport">刷新</el-button>
        <el-button type="success" size="small" @click="exportReport">导出</el-button>
      </div>
    </div>

    <div class="report-content">
      <!-- 数据质量概览 -->
      <div class="quality-overview">
        <div class="quality-item">
          <div class="quality-label">数据完整性</div>
          <div class="quality-value good">99.7%</div>
        </div>
        <div class="quality-item">
          <div class="quality-label">标注准确性</div>
          <div class="quality-value good">98.2%</div>
        </div>
        <div class="quality-item">
          <div class="quality-label">噪声比例</div>
          <div class="quality-value warning">2.1%</div>
        </div>
        <div class="quality-item">
          <div class="quality-label">异常检测</div>
          <div class="quality-value error">0.3%</div>
        </div>
      </div>

      <!-- 样本分布统计 -->
      <div class="distribution-section">
        <div class="section-title">样本分布统计</div>
        <div class="charts-row">
          <div class="chart-wrapper">
            <div class="chart-title">目标类型分布</div>
            <div ref="targetDistChart" class="chart-container"></div>
          </div>
          <div class="chart-wrapper">
            <div class="chart-title">频段分布</div>
            <div ref="frequencyDistChart" class="chart-container"></div>
          </div>
        </div>
      </div>

      <!-- 特征分布统计 -->
      <div class="feature-section">
        <div class="section-title">特征分布统计</div>
        <div class="feature-tabs">
          <el-tabs v-model="activeFeatureTab" type="border-card">
            <el-tab-pane label="信号强度" name="strength">
              <div ref="strengthChart" class="feature-chart"></div>
            </el-tab-pane>
            <el-tab-pane label="频谱特征" name="spectrum">
              <div ref="spectrumChart" class="feature-chart"></div>
            </el-tab-pane>
            <el-tab-pane label="时域特征" name="temporal">
              <div ref="temporalChart" class="feature-chart"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <!-- 异常样本列表 -->
      <div class="anomaly-section">
        <div class="section-title">异常样本检测</div>
        <el-table
          :data="anomalyData"
          style="width: 100%"
          :height="150"
          stripe
        >
          <el-table-column prop="id" label="样本ID" width="120" />
          <el-table-column prop="type" label="异常类型" width="120">
            <template #default="scope">
              <el-tag :type="getAnomalyTagType(scope.row.type)">
                {{ scope.row.type }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="severity" label="严重程度" width="100">
            <template #default="scope">
              <el-progress
                :percentage="scope.row.severity"
                :stroke-width="8"
                :status="getSeverityStatus(scope.row.severity)"
                :show-text="false"
              />
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" />
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button type="text" size="small" @click="viewDetail(scope.row)">
                查看
              </el-button>
              <el-button type="text" size="small" @click="fixAnomaly(scope.row)">
                修复
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeFeatureTab = ref('strength')
const anomalyData = ref([
  {
    id: 'SAM_001247',
    type: '信号失真',
    severity: 85,
    description: '高频分量异常，可能存在设备故障'
  },
  {
    id: 'RAD_003891',
    type: '数据缺失',
    severity: 60,
    description: '时间序列中存在空值'
  },
  {
    id: 'SAR_002156',
    type: '噪声过高',
    severity: 45,
    description: '信噪比低于阈值'
  }
])

// 图表引用
const targetDistChart = ref(null)
const frequencyDistChart = ref(null)
const strengthChart = ref(null)
const spectrumChart = ref(null)
const temporalChart = ref(null)

// 图表实例
let chartInstances = {}

// 初始化图表
const initCharts = () => {
  initTargetDistChart()
  initFrequencyDistChart()
  initFeatureCharts()
}

// 目标类型分布图表
const initTargetDistChart = () => {
  if (!targetDistChart.value) return

  const chart = echarts.init(targetDistChart.value)
  chartInstances.targetDist = chart

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00f5ff',
      textStyle: { color: '#ffffff' }
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '50%'],
      data: [
        { value: 35, name: '战机-F-22', itemStyle: { color: '#ff6b6b' } },
        { value: 25, name: '战机-A-10', itemStyle: { color: '#4ecdc4' } },
        { value: 20, name: '运输机', itemStyle: { color: '#45b7d1' } },
        { value: 15, name: '直升机', itemStyle: { color: '#96ceb4' } },
        { value: 5, name: '其他', itemStyle: { color: '#feca57' } }
      ],
      label: {
        color: '#ffffff',
        fontSize: '0.9vw'
      },
      labelLine: {
        lineStyle: { color: '#ffffff' }
      }
    }]
  }

  chart.setOption(option)
}

// 频段分布图表
const initFrequencyDistChart = () => {
  if (!frequencyDistChart.value) return

  const chart = echarts.init(frequencyDistChart.value)
  chartInstances.frequencyDist = chart

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00f5ff',
      textStyle: { color: '#ffffff' }
    },
    xAxis: {
      type: 'category',
      data: ['L波段', 'S波段', 'C波段', 'X波段', 'Ku波段', 'Ka波段'],
      axisLabel: { color: '#ffffff', fontSize: '0.8vw' },
      axisLine: { lineStyle: { color: '#00f5ff' } }
    },
    yAxis: {
      type: 'value',
      name: '样本数量',
      nameTextStyle: { color: '#ffffff', fontSize: '0.9vw' },
      axisLabel: { color: '#ffffff', fontSize: '0.8vw' },
      axisLine: { lineStyle: { color: '#00f5ff' } },
      splitLine: { lineStyle: { color: 'rgba(0, 245, 255, 0.3)' } }
    },
    series: [{
      type: 'bar',
      data: [12543, 18234, 15678, 22145, 8934, 5432],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#00f5ff' },
          { offset: 1, color: '#0066cc' }
        ])
      }
    }]
  }

  chart.setOption(option)
}

// 特征图表
const initFeatureCharts = () => {
  // 信号强度分布
  if (strengthChart.value) {
    const chart = echarts.init(strengthChart.value)
    chartInstances.strength = chart

    const strengthOption = {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#00f5ff',
        textStyle: { color: '#ffffff' }
      },
      xAxis: {
        type: 'category',
        data: Array.from({length: 20}, (_, i) => `-${60 - i * 3}dBm`),
        axisLabel: { color: '#ffffff', fontSize: '0.7vw' },
        axisLine: { lineStyle: { color: '#00f5ff' } }
      },
      yAxis: {
        type: 'value',
        name: '样本数量',
        nameTextStyle: { color: '#ffffff', fontSize: '0.8vw' },
        axisLabel: { color: '#ffffff', fontSize: '0.7vw' },
        axisLine: { lineStyle: { color: '#00f5ff' } },
        splitLine: { lineStyle: { color: 'rgba(0, 245, 255, 0.3)' } }
      },
      series: [{
        type: 'line',
        smooth: true,
        data: generateNormalDistribution(20, 10, 3),
        lineStyle: { color: '#00ff00', width: 2 },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 255, 0, 0.3)' },
            { offset: 1, color: 'rgba(0, 255, 0, 0.1)' }
          ])
        }
      }]
    }

    chart.setOption(strengthOption)
  }
}

// 生成正态分布数据
const generateNormalDistribution = (count, peak, spread) => {
  return Array.from({length: count}, (_, i) => {
    const x = i - peak
    return Math.exp(-(x * x) / (2 * spread * spread)) * 1000 + Math.random() * 100
  }).map(v => Math.round(v))
}

// 获取异常标签类型
const getAnomalyTagType = (type) => {
  const typeMap = {
    '信号失真': 'danger',
    '数据缺失': 'warning',
    '噪声过高': 'info'
  }
  return typeMap[type] || 'default'
}

// 获取严重程度状态
const getSeverityStatus = (severity) => {
  if (severity >= 80) return 'exception'
  if (severity >= 60) return 'warning'
  return 'success'
}

// 事件处理
const refreshReport = () => {
  ElMessage.success('报告已刷新')
  // 这里可以重新获取数据
}

const exportReport = () => {
  ElMessage.success('报告导出中...')
  // 这里可以实现导出功能
}

const viewDetail = (row) => {
  ElMessage.info(`查看异常样本: ${row.id}`)
}

const fixAnomaly = (row) => {
  ElMessage.warning(`修复异常样本: ${row.id}`)
}

// 监听标签页切换
watch(activeFeatureTab, async (newTab) => {
  await nextTick()
  if (newTab === 'strength' && strengthChart.value && !chartInstances.strength) {
    initFeatureCharts()
  }
  // 可以根据需要初始化其他特征图表
})

onMounted(async () => {
  await nextTick()
  initCharts()
})

onUnmounted(() => {
  Object.values(chartInstances).forEach(chart => {
    if (chart) chart.dispose()
  })
})
</script>

<style scoped>
.data-validation-report {
  height: 25vh;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 1vh;
  padding: 1.5vh 1.5vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 245, 255, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid rgba(0, 245, 255, 0.3);
}

.report-header h3 {
  color: #00f5ff;
  font-size: 1.4vw;
  margin: 0;
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}

.report-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  overflow-y: auto;
}

.quality-overview {
  display: flex;
  gap: 1vw;
  justify-content: space-between;
  padding: 1vh;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5vh;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.quality-item {
  text-align: center;
  flex: 1;
}

.quality-label {
  color: #cccccc;
  font-size: 0.9vw;
  margin-bottom: 0.5vh;
}

.quality-value {
  font-size: 1.2vw;
  font-weight: bold;
}

.quality-value.good { color: #00ff00; }
.quality-value.warning { color: #ffaa00; }
.quality-value.error { color: #ff4444; }

.distribution-section,
.feature-section,
.anomaly-section {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5vh;
  padding: 1vh 1vw;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
  color: #ffffff;
  font-size: 1.1vw;
  font-weight: bold;
  margin-bottom: 1vh;
}

.charts-row {
  display: flex;
  gap: 1vw;
}

.chart-wrapper {
  flex: 1;
}

.chart-title {
  color: #ffffff;
  font-size: 0.9vw;
  text-align: center;
  margin-bottom: 0.5vh;
}

.chart-container {
  height: 8vh;
  width: 100%;
}

.feature-chart {
  height: 10vh;
  width: 100%;
}

:deep(.el-tabs__header) {
  margin: 0 0 1vh 0;
}

:deep(.el-tabs__nav) {
  background: rgba(0, 0, 0, 0.3);
}

:deep(.el-tabs__item) {
  color: #cccccc;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.9vw;
}

:deep(.el-tabs__item.is-active) {
  color: #00f5ff;
  background: rgba(0, 245, 255, 0.1);
}

:deep(.el-table) {
  background: transparent;
  color: #ffffff;
}

:deep(.el-table th) {
  background: rgba(0, 0, 0, 0.5);
  color: #00f5ff;
  border-color: rgba(0, 245, 255, 0.3);
  font-size: 0.9vw;
}

:deep(.el-table td) {
  border-color: rgba(255, 255, 255, 0.1);
  font-size: 0.8vw;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: rgba(255, 255, 255, 0.05);
}

:deep(.el-button--text) {
  color: #00f5ff;
  font-size: 0.8vw;
}
</style>
